<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>home</title>
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./script/jquery.min.js"></script>
    <script src="./script/popper.min.js"></script>
    <script src="./script/bootstrap.min.js"></script>
</head>
<body>
    <div id="header" class="row">
        <div class="col-8 offset-2">
            <div class="row align-items-end" id="form">
                <div class="col-2">
                    <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="百度图片">
                </div>
                <div class="col-8">
                    <input type="text" class="form-control" id="usr">
                </div>
                <div class="col-2 ">
                    <button type="submit" class="btn btn-primary">百度一下</button>
                </div>
            </div>
        </div>
    </div>
    <div style="margin: 20px;">
        <div class="row">
            <div class="col-3">
                <ul class="list-group">
                    <li class="list-group-item active">文档</li>
                    <li class="list-group-item">
                        <img class="icon" src="https://docs.microsoft.com/favicon.ico" alt="微软图标">
                        <a href="https://docs.microsoft.com/zh-cn/">微软文档</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://docs.microsoft.com/favicon.ico" alt="">
                        <a href="https://docs.microsoft.com/zh-cn/dotnet/api/?view=netframework-4.8">.NET文档</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://docs.apicloud.com/favicon.ico" alt="">
                        <a href="https://docs.apicloud.com/">apicloud文档</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://openjfx.io/favicon.ico" alt="">
                        <a href="https://openjfx.io/">JavaFx官网</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://doc.qt.io/favicon.ico" alt="">
                        <a href="https://doc.qt.io/qt-5/classes.html">Qt类文档</a>
                    </li>
                    <li class="list-group-item">
                        <img src="http://bs4.ntp.org.cn/favicon.ico" alt="">
                        <a href="http://bs4.ntp.org.cn/">bootstrap4中文文档</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://www.apicloud.com/favicon.ico" alt="">
                        <a href="https://www.apicloud.com/">apicloud官网</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://spring.io/favicon.ico" alt="">
                        <a href="https://spring.io/projects/spring-boot/">spring-boot官网</a>
                    </li>
                   
                </ul>
            </div>
            <div class="col-3">
                <ul class="list-group">
                        <li class="list-group-item active">教程</li>
                    <li class="list-group-item">
                        <img src="https://blog.csdn.net/favicon.ico" alt="">
                        <a href="https://blog.csdn.net/valada/article/details/86188123">Electron开发入门</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://www.liaoxuefeng.com/favicon.ico" alt="">
                        <a href="https://www.liaoxuefeng.com/">廖雪峰官网</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://www.w3cschool.cn/favicon.ico" alt="">
                        <a href="https://www.w3cschool.cn/">w3cschool</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://www.w3school.com.cn/favicon.ico" alt="">
                        <a href="https://www.w3school.com.cn/">w3school</a>
                    </li>
                </ul>
            </div>
            <div class="col-3">
                <ul class="list-group">
                        <li class="list-group-item active">工具</li>
                    <li class="list-group-item">
                        <img src="https://gitee.com/favicon.ico" alt="">
                        <a href="https://gitee.com/">码云</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://juejin.im/favicon.ico" alt="">
                        <a href="https://juejin.im/">掘金</a>
                    </li>
                    <li class="list-group-item">
                        <img src="http://aui.dianm.cc/favicon.ico" alt="">
                        <a href="http://aui.dianm.cc/">aui官网</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://github.com/favicon.ico" alt="">
                        <a href="https://github.com">github</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://www.jd.com/favicon.ico" alt="">
                        <a href="https://www.jd.com/">京东商城</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://www.zhihu.com/favicon.ico" alt="">
                        <a href="https://www.zhihu.com/">知乎</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://fanyi.baidu.com/favicon.ico" alt="">
                        <a href="https://fanyi.baidu.com/?aldtype=16047#auto/zh">百度翻译</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://www.nowcoder.com/favicon.ico" alt="">
                        <a href="https://www.nowcoder.com/">牛客网</a>
                    </li>
                </ul>
            </div>
            <div class="col-3">
                <ul class="list-group">
                    <li class="list-group-item active">资源</li>
                    <li class="list-group-item">
                        <img src="https://www.easyicon.net/favicon.ico" alt="">
                        <a href="https://www.easyicon.net/">easyicon</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://www.iconfont.cn/favicon.ico" alt="">
                        <a href="https://www.iconfont.cn/">阿里巴巴图标库</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://thenounproject.com/favicon.ico" alt="">
                        <a href="https://thenounproject.com/">freeicon</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://zhutix.com/favicon.ico" alt="">
                        <a href="https://zhutix.com/">致美化</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://icons8.com/icons/favicon.ico" alt="">
                        <a href="https://icons8.com/icons">icon8</a>
                    </li>
                    <li class="list-group-item">
                        <img src="http://www.51pptmoban.com/favicon.ico" alt="">
                        <a href="http://www.51pptmoban.com/">51PPT模板</a>
                    </li>
                    <li class="list-group-item">
                        <img src="https://www.apicloud.com/favicon.ico" alt="">
                        <a href="https://www.apicloud.com/modulestore">apicloud模块store</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>